import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate' // 下载本地持久化的应该插件引入
import { getUserInfoAPI } from '@/api/index' // 引入获取用户基本信息的接口

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: JSON.parse(localStorage.getItem('vuex')) || {},
    userInfo: {} // 用来存贮用户基本信息
  },
  getters: { // 方便外界取值
    username: state => state.userInfo.username, // 用户名
    nickname: state => state.userInfo.nickname, // 用户昵称
    user_pic: state => state.userInfo.user_pic // 用户头像
  },
  mutations: {
    updateToken (state, val) { // 保存最新token的方法
      state.token = val // 把外界的token重新赋值
    },
    updateUserInfo (state, val) { // 更新用户基本信息的方法
      state.userInfo = val
    }
  },
  actions: {
    async getUserInfoActions (store) { // 执行异步请求获取用户基本信息
      const { data } = await getUserInfoAPI()
      store.commit('updateUserInfo', data.data) // 把获取的用户信息重新赋值
    }
  },
  modules: {
  },
  plugins: [
    createPersistedState()
  ] // 配置本地持久化的插件
})
